<template>
  <div class="editBox">
    <el-button size="mini" @click="handleEdit()">编辑</el-button>
    <el-drawer title="修改信息" direction="rtl" :modal-append-to-body="false" destroy-on-close :before-close="handleClose" :visible="drawer" width="70%">
      <el-form label-position="right" ref="formName" label-width="80px" :model="formLabelAlign">
        <el-form-item label="标题">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="formLabelAlign.userId" remote :remote-method="userSearch" filterable placeholder="可搜索">
            <el-option v-for="item in userList" :key="item.userId" :label="item.username" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="formLabelAlign.tag" placeholder="请选择">
            <el-option v-for="item in subjeList" :key="item.subjectId" :label="item.subjectName" :value="item.subjectId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <div style="border: 1px solid #ccc;">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 500px; overflow-y: hidden;" v-model="formLabelAlign.content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
          </div>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="formLabelAlign.publishTime" value-format="yyyy-MM-dd HH:mm:SS" type="datetime" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学校">
          <el-select v-model="formLabelAlign.schoolId" placeholder="请选择">
            <el-option v-for=" item,index in $store.state.school.profile" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" @click="submit">修改信息</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { update } from '@/api/post'
import { search } from '@/api/user'
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    subjeList: { type: Array, default: () => [] }
  },
  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      drawer: false,
      userList: [],
      formLabelAlign: {
        userId: '',
        title: '',
        tag: '',
        content: '',
        publishTime: '',
        schoolId: '',
        postId: ''
      },
      course: [],
      editor: null,
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    const { postId, userId, title, schoolId, tag, content, publishTime } = this.info
    const data = { postId, userId, title, schoolId, tag: Number(tag), content, publishTime }
    this.formLabelAlign = data
  },
  methods: {
    userSearch(stuNo) {
      if (stuNo === '' || !/^\d+$/.test(stuNo)) {
        return
      }
      search(stuNo).then(res => {
        this.userList = res.data
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handleEdit() {
      this.drawer = true
    },
    submit() {
      this.drawer = false
      this.updateFn()
    },
    updateFn() {
      update(this.formLabelAlign).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.$emit('editeChange')
      })
    },
    closeFn() {
      this.formLabelAlign = {
        title: '',
        tag: '',
        content: '',
        publishTime: '',
        schoolId: ''
      }
      this.drawer = false
    },
    handleClose(done) {
      this.closeFn()
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-drawer {
  width: 97% !important;
}
.editBox {
  padding-right: 10px;
}
</style>